<template>
  <!-- 学习资料上传管理 -->

  <div class="class-mg">
    <!-- 创建班级头部 -->
    <div class="up-material">
      <el-button @click="showModal = true" style="margin-left: 10px;">添加题目</el-button>
    </div>

    <!-- 班级信息表格 -->
    <div class="table">

      <span>我创建的题目:</span>
      <el-table @row-dblclick="onRow" :data="topicData" class="el-table" style="cursor: pointer;width: 100%;border-radius: 10px;">
        <el-table-column  label="题目"  #default="data">
          <el-tooltip effect="light" :content="data.row.title" placement="left">
            <span class="text-container">{{ data.row.title }}</span> 
                </el-tooltip>
             
        </el-table-column>
        <el-table-column prop="type" label="类型" width="180"></el-table-column>
        <el-table-column prop="score" label="分值" width="180"></el-table-column>
        
        <!-- <el-table-column label="点击查看题目详情" #default="data">
          <el-button @click="showInfo(data.row)">按钮</el-button>
        </el-table-column> -->

        <el-table-column label="删除" width="180" #default="data">
          <el-popconfirm title="确认删除该题目吗?" @confirm="onDeleteTopic(data.row.topicId)">
            <template #reference>
              <img src="/src/assets/svg/delete1.svg" class="deleye-img">
            </template>
          </el-popconfirm>
        </el-table-column>
      </el-table>

    </div>
  </div>

  <!-- 发送通知弹窗 -->
  <n-modal v-model:show="showModal">
    <n-card style="width: 900px;height: 900px;" title="创建题目" role="dialog" aria-modal="true">
      <!-- 关闭框 -->
      <template #header-extra>
        <img src="/src/assets/svg/delete.svg" class="deleye-img" @click="showModal = false">
      </template>
      <div>
        <!-- 题目数据 {{ topicItemData }} -->
        <div class="topic-type">
          <span>选择题目类型</span>
          <button v-for="(item, index) in questionType" :key="index" @click="onAddRadio(item)"
            :class="{ 'selected': question == item }">{{ item }}题</button>
        </div>
        <!-- 分割线 -->
        <el-divider content-position="right">
          <el-icon><star-filled /></el-icon>
        </el-divider>
        <!-- 主要内容 -->
        <div v-if="question == '单选'">
          <radio :radioData="topicItemData"></radio>
        </div>
        <div v-else-if="question == '多选'">
          <multiple :checkboxData="topicItemData"></multiple>
        </div>
        <div v-else-if="question == '判断'">
          <estimate :estimateData="topicItemData"></estimate>
        </div>
        <div v-else-if="question == '简答'">
          <short-answer :shortAnswerData="topicItemData"></short-answer>
        </div>
        <div v-else-if="question == '编程'">
          <program :ProgramData="topicItemData"></program>
        </div>
        <div v-else>
          <p class="text-type">请先选择题目类型</p>
        </div>
      </div>
      <!-- 提交按钮 -->
      <template #footer>
        <div style="display: flex;justify-content: flex-end;">
          <el-button @click="onsubmit()">提交</el-button>
        </div>
      </template>
    </n-card>
  </n-modal>
</template>

<script setup>
import { onMounted, ref } from 'vue';

import { StarFilled } from "@element-plus/icons-vue";
import useUserStore from '@/stores/useUserStore';
import { openInfo } from '@/utils/openInfo';
//导入各种题型组件
import Radio from '@/components/topicType/Radio.vue';
import Multiple from '@/components/topicType/Multiple.vue';
import Estimate from '@/components/topicType/Estimate.vue';
import ShortAnswer from '@/components/topicType/ShortAnswer.vue';
import Program from '@/components/topicType/Program.vue';
import teacherHttp from '@/api/teacherHttp';
const userStore = useUserStore()
import { useModal } from "naive-ui";
const modal = useModal();
//弹窗显示
const showModal = ref(false)
//试题选择类型
const questionType = ref(['单选', "多选", "判断", "简答", "编程"])

//当前选中的是
const question = ref("")

//当前题目数据
const topicItemData = ref("")

//点击选中题型后
function onAddRadio(type) {
  //创建题目
  const topicMode = {title: "", type: type, options: [], answer:null, score: 5, teacherId: userStore.userInfo.userId }
  //把题目数据给组件
  topicItemData.value = topicMode
  //更改按钮选中类型也是样式
  question.value = type
}

//点击提交创建的题目
function onsubmit() {
  console.log(topicItemData.value);
  //进行表单校验
  if(verify(topicItemData.value)){
   teacherHttp.addTopics(topicItemData.value).then((res)=>{
    if(res.code == 200){
      openInfo(res.msg)
      showModal.value = false
      getTopicList()
    }
   })
  }
}

//提交表单时的数据校验
function verify(data){
  //检查标题
  if(data.title==""){
    openInfo("请先设置题目内容")
    return 0;
  }
  //检查是否存在答案
  if(data.answer==null){
    openInfo("请先设置答案")
    return 0;
  }
  //检查选项填写
  if(data.type =="单选" || data.type =="多选"){
    //遍历每一个选项
    for (let i = 0; i < data.options.length; i++) {
      if(data.options[i].text==""){
        openInfo("选项内容不能留空")
        return 0;
      }
    }
  }
  
  return 1;
}

//点击删除题目 根据题目id删除题目
function onDeleteTopic(topicId) {
  teacherHttp.deleteTopic(topicId).then((res)=>{
    if(res.code ==200){
      getTopicList();
      console.log(res);
    }
  })
  
}



//试题数据 title 类型 分值 
const topicData = ref()
//获取老师题库数据
function getTopicList(){
  teacherHttp.getTopicList(userStore.userInfo.userId).then((res)=>{
    console.log("题库数据",res.data);
    topicData.value = res.data
  })
}
onMounted(()=>{
  //初始化数据
  getTopicList()
})


//查看题目详情
function showInfo(data){
 console.log('');
 
}
//点击一行时触发 可以用这个来获取详细信息
function onRow(rowdata){
  console.log(rowdata);
}
</script>

<style scoped>
/* 最大的盒子 */
.class-mg {
  background-color: rgb(182, 174, 174, 0.1);
  display: flex;
  flex-direction: column;
  height: 900px;
  border-radius: 10px;
}

/* 创建班级和发送通知 */
.up-material {
  margin: 10px;
  height: 50px;
  background-color: rgb(182, 174, 174, 0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
}

/* 关闭弹窗键 */
.deleye-img {
  transition: transform 0.3s ease;
  cursor: pointer;
}

.deleye-img:hover {
  transform: scale(1.2);
}

/* 题目表格 */
.table {
  border-radius: 10px;
  padding: 20px;

}


/* 添加题目类型 ---------------------------*/
.topic-type {
  border: 1px rgb(149, 108, 79, 0.2) solid;
  height: 50px;
  border-radius: 10px;
  margin-bottom: 15px;
  display: flex;
  padding-left: 20px;
  align-items: center;
  min-width: 400px;
}

.topic-type span{
  min-width: 85px;
}
/* 按钮距离 */
.topic-type button {
  min-width: 60px;
  margin-left: 15px;
  border: none;
  border-radius: 4px;
  font-family: "幼圆";
  padding: 5px;
  cursor: pointer;
  font-size: 14px;
  background-color: rgb(214, 237, 235, 0.8);
  transition: background-color 0.3s ease-in-out, color 0.3s ease;
}

.topic-type button:hover {
  color: rgb(221, 233, 242);
  background-color: rgba(11, 98, 101, 0.6);
}

/* 选中题目的样式 */
.topic-type button.selected {
  background-color: rgba(11, 98, 101);
  color: rgb(238, 230, 230);
}

/* 请先选择题目类型 */
.text-type {
  text-align: center;
  font-size: 38px;
}
/* 文本太长就隐藏 */
.text-container {
    width: 250px; /* 设置容器的最大宽度 */
    white-space: nowrap; /* 保持文本在一行内显示，不换行 */
    overflow: hidden; /* 隐藏超出容器宽度的部分 */
    text-overflow: ellipsis; /* 显示省略号来表示文本被截断 */
    padding: 5px; /* 可选，添加内边距 */
}

</style>